<template>
    <div class="container">
        <div class="user-box">
            <img class="avatar" src="/static/img/avatar.png"  />
            <div class="username">{{user.name}}</div>
            <div class="phone">{{user.phone}}</div>
        </div>
        <div class="box">
            <div v-if="isLevel2() || special(channel)" class="box-item" @click="toPage('/center/balance')">
                <div class="box-title">佣金账户余额（元）</div>
                <div class="box-money">¥ {{fMoney(null,null,account.balance)}}</div>
                <img class="box-right-icon" src="/static/img/toright.png" />
            </div>
            <div v-if="isLevel1() || special(channel)" class="box-item" @click="toPage('/center/recommend')">
                <div class="box-title">推荐账户余额（元）</div>
                <div class="box-money">¥ {{fMoney(null,null,account.recommendBalance)}}</div>
                <img class="box-right-icon" src="/static/img/toright.png" />
            </div>
        </div>
        <div class="box">
            <div class="box-item" @click="toPage('/center/updateacccount')">
                提现账户
                <img class="box-right-icon" src="/static/img/toright.png" />
            </div>
            <div class="box-item" @click="toPage('/center/withdraw/all')" >
                提现明细
                <img class="box-right-icon" src="/static/img/toright.png" />
            </div>
            <div class="box-item" @click="toPage('/center/operatordescription')" >
                操作说明
                <img class="box-right-icon" src="/static/img/toright.png" />
            </div>
            <div @click="toPage('/center/uppwd')" class="box-item">
                修改密码
                <img class="box-right-icon" src="/static/img/toright.png" />
            </div>
        </div>

        <div class="box">
            <div @click="logoutEvent" class="box-item" style="text-align:center;" >
                退出登录
            </div>
        </div>
    </div>
</template>
<script>
export default {
    components:{},
    data:function(){
        return {
            channel:'',
            user:{
                avatar:'',
                name:'',
                phone:''
            },
            account:{
                balance:0,
                recommendBalance:0
            }
        };
    },
    created:function(){
        var userinfo = localStorage.getItem('userinfo');
        if(userinfo){
            var user = JSON.parse(userinfo);
            this.user.name = user.name;
            this.user.phone = user.phone;
            this.channel = user.channel;
        }
        this.loadAccount();
    },
    methods:{
        loadAccount(){
            var that = this;
            that.$api.post('/channel/channelWithdrawDeposit/channelInfo.json',{}).then(data =>{
                if(data.data.code != '0'){
                    that.$message.error(data.data.msg);
                    return;
                }
                that.account = data.data.data;
            });
        },
        logoutEvent(){
            var that = this;
            if(confirm('您确定要退出登录吗？')){
                localStorage.removeItem('userinfo');
                that.toPage('/login');
            }
        }
    }
}
</script>
<style scoped>
    .container{
        width: 100%;min-height: 100%;
        background: #F2F6FC;
        padding: 20px;
        color:#303133;
    }
    .box{
        width: 100%;
        background: #fff;
        border-radius: 10px;
        position: relative;
        padding: 0 10px;
        margin-top:20px;
    }
    .box .box-item{
        padding: 15px 5px;
        border-bottom: 1px solid #E4E7ED;
        position: relative;
    }
    .box .box-item:last-child{
        border-bottom: none;
    }
    .box .box-item .box-right-icon{
        position: absolute;
        top:0;bottom: 0;
        margin: auto;
        right: 10px;
        width: 20px;
        height: 20px;
    }
    .box .box-money{
        font-size: 28px;
        font-weight: 600;
        color: #000;
        margin-top: 10px;
    }
    .user-box{
        width: 100%;
        position: relative;
        padding: 10px 10px 10px 100px;
    }
    .user-box .avatar{
        width: 80px;
        height: 80px;
        position: absolute;
        top:10px;
        left: 10px;
    }
    .user-box .username{
        color: #000;
        font-size: 16px;
        margin: 10px 0;
    }
</style>
